<template>
  <basic-dialog :visible="show"
                minWidth="500px"
                title="计数详情"
                isShowClose
                @close="hideDialog">
    <div class="margin-20">
      <q-table
        :data="tableData"
        :columns="tableColumns"
        row-key="number"
        id="table"
        class="myTable scroll my-sticky-header-table"
        style="margin: 0 0 15px"
        :hide-bottom="tableData.length !== 0"
        no-data-label="暂无数据"
        :pagination.sync="pagination"
        color="primary"
        :loading="tableLoading"
      >
        <template v-slot:no-data>
          <div class="full-width row flex-center font-size-14" style="color: #999">
            暂无数据
          </div>
        </template>
      </q-table>
    </div>
  </basic-dialog>
</template>

<script>
export default {
  name: 'count-detail-dialog',
  props: {
    tableLoading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      pagination: {
        // 每页条数
        rowsPerPage: 0
      },
      show: false,
      tableColumns: [
        { name: 'number', field: 'number', label: '主程序号', align: 'left' },
        { name: 'count', field: 'count', label: '生产零件数', align: 'left' }
      ]
    }
  },
  methods: {
    showDialog () {
      this.show = true
    },
    hideDialog () {
      this.show = false
    }
  }
}
</script>

<style scoped lang="stylus">
.my-sticky-header-table
  height: 420px
</style>
